/*---------------------------------------------------------------- 
// 文件功能描述：通用混合器、模块样式 
// author：tyy
// 时间：2020/07/16
// 修改标识： 
// 修改描述：
//----------------------------------------------------------------*/

/* font
-------------------------- */
$--font-size: 30px !default;
/* Color
-------------------------- */
$--color-font: #606266 !default;
$--color-primary: #409EFF !default;
$--color-white: #fff !default;
$--color-black: #000000 !default;
$--border-color: #DCDFE6 !default;

/* Set Basics
-------------------------- */
@mixin elementSize($w,$h){  
	width: $w;
	height: $h;
}

.rightfade-enter-active{
	animation-name:slideInRight;animation-duration:1s;
}

.rightfade-leave-active{
	animation-name:slideToRight;animation-duration:1s;
}

@keyframes slideToRight {
	from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
	}

	to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
	}
}

.slideToRight {
	-webkit-animation-name: slideToRight;
	animation-name: slideToRight;
}

@keyframes slideInRight {
	from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
	}

	to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
	}
}

.slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}
/*
  下拉框样式
*/
  .el-select .el-input.is-focus .el-input__inner{
		  border-color: #C0C4CC;
	}
	.el-select .el-input__inner:focus{
		border-color: #C0C4CC;
	}
	.el-select-dropdown__item.selected{
			color: #3964f9
	}
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: #ebeffe;
		color: #3964f9
	}
// 公用背景
html,
body,
#app
{
	@include elementSize(100%,100%);
	-webkit-overflow-scrolling: touch;
	position: relative;
}
body{
	font-size: 24px;
	color: #000;
	position: relative;
	background: #fff;
	overflow-x:hidden ;
}
// 公用遮罩
.mask{
	@include elementSize(100%,100%);
	background: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000 !important;
}
// .mask-enter-active{
// 	animation-name:zoomIn;
// 	animation-duration:2s;
// }
// .mask-leave-active{
// 	animation-name:fadeOut;
// 	animation-duration:2s;
// }
// .isScroll{
//     overflow: auto;
//     &::-webkit-scrollbar{
//         width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
//         height: 1px;
//     }
//     &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
//         border-radius: 6px;
//         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//         background: #666;
//     }
//     &::-webkit-scrollbar-track {/*滚动条里面轨道*/
//         -webkit-box-shadow: inset 0 0 5px rgba(59, 100, 168,0.1);
//         border-radius: 6px;
//         background: #eee;
//     }
// }
.page-switch-enter-active{
	animation-name:fadeInRight;
	animation-duration:.2s;
}

//水平垂直居中
.center{
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.boxStyle{
	background: #FFFFFF;
	box-shadow: 0px 10px 27px 3px rgba(2, 175, 254, 0.06);
	border-radius: 40px;
}
.label{
	width: 130px;
	height: 48px;
	line-height: 48px;
	background: #02AFFE;
	border-radius: 40px 24px 24px 0px;
    // padding: 0.1rem 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 22px;
    text-align: center;
}
.pointer{
	cursor: pointer;
}
.ellipsisTwo{
	-webkit-line-clamp:2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}
.ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
.bold{
	font-weight: bold;
}
.mar20{
					margin-left: 20px;
	}
.absolute{
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}

	.scrollStyle::-webkit-scrollbar {
    width: 6px;
		height: 1px;
		display: none;
}
.scrollStyle::-webkit-scrollbar-thumb {
		border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.6);
    background-color: rgba(0, 0, 0, .1);

			display: none;
}

.scrollStyle::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
    border-radius: 10px;
		background: #F4f4f4;
			display: none;
}

.bom20{
	margin-bottom: 20px;
}
